<template>
	<view class="my-path-list">
		<view class="path-list">
			<view class="path-item" v-for="(item,index) in list" :key="index">
				<view class="item-main">
					<view class="item-name">{{item.name}}</view>
					<view>{{item.tel}}</view>
				</view>
				<view class="item-main">
					<view class="active" v-if="item.isDefault">默认</view>
					<view class="f-color">{{item.city}} {{item.details}}</view>
				</view>
			</view>
		</view>
		<view class="add-path">
			<view class="add-path-btn">
				<view @tap="goAddPath">新增地址 +</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			...mapState({
				list:state=>state.path.list
			})
		},
		methods: {
			goAddPath(){
				uni.navigateTo({
					url:'/pages/my-add-path/my-add-path'
				})
			}
		}
	}
</script>

<style scoped>
.add-path{
	width: 100%;
	display: flex;
	justify-content: center;
}
.add-path-btn{
	border: 2rpx solid #49dbfb;
	color: #ffffff;
	border-radius: 30rpx;
	margin-top: 30rpx;
	padding: 6rpx 30rpx;
	background-color: #49dbfb ;
}
.path-list{
	padding-left: 10rpx;
}
.path-item{
	padding: 10rpx;
	border-bottom: 2rpx solid #CCCCCC;
}
.item-main{
	display: flex;
	align-items: center;
	margin: 10rpx;
}
.item-name{
	margin-right: 30rpx;
	font-weight: bold;
}
.active{
	padding: 6rpx 10rpx;
	background-color: #49bdfb;
	color: #ffffff;
	border-radius: 30rpx;
	margin-right: 20rpx;
}
</style>
